<template>
  <view class="content">
    <view class="u-p-t-20 u-p-l-20 u-p-r-20">
      <u-search
        placeholder="搜索"
        v-model="search_value"
        shap="round"
        :clearabled="true"
        :show-action="false"
        input-align="center"
        height="70"
      ></u-search>
    </view>
    <view class="u-m-t-40">
      <u-card
        v-for="(item, index) in Data"
        :key="index"
        margin="30rpx"
        :show-head="false"
        :show-foot="false"
        border-radius="20"
        :border="false"
        class="card-border"
        @click="linkTo(index)"
      >
        <view slot="body" class="u-body-item u-flex u-col-between u-p-t-0">
          <image :src="item.icon" mode="aspectFill"></image>
          <view class="u-body-item-title u-line-2">
            <h5>{{ item.title }}</h5>
            <text>创建时间: {{ item.time }}</text>
            <text class="total">{{ item.total }} 题</text>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      search_value: "",
      checked: true,
      Data: [
        {
          title: "数学题库",
          total: 128,
          time: "2020-05-15",
          icon:
            "https://tse1-mm.cn.bing.net/th/id/R-C.2fe02a585ac665f14cbc63dbe9e47beb?rik=%2bCPFwBmM6My8Yw&riu=http%3a%2f%2fpic241.nipic.com%2ffile%2f20190921%2f29571549_091905595089_2.jpg&ehk=8W5zjL2499%2bTlLQL%2bqqPX8%2bDVIneBimZQHeDEHBS7HE%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          title: "化学题库",
          total: 512,
          time: "2020-05-15",
          icon:
            "https://tse1-mm.cn.bing.net/th/id/R-C.29080be80c125b72dda0427b9cec0756?rik=AiM4HUC19ASldA&riu=http%3a%2f%2fwww.dzkbw.com%2fbooks%2flkb%2fhuaxue%2fpgzbxd2c%2fcoverbig.jpg&ehk=rm89VSkhLpyiAk1riDp2zSt81ICaqG9fy%2fL2gyJKMqY%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          title: "物理题库",
          total: 1208,
          time: "2020-05-15",
          icon:
            "https://tse1-mm.cn.bing.net/th/id/R-C.d871cf7532f7ba1805f62dfeda151fda?rik=JJjoqJnWqI6J4g&riu=http%3a%2f%2fimgx.xiawu.com%2fxzimg%2fi4%2fi3%2fT1AS1jXDxiXXXXXXXX_!!0-item_pic.jpg&ehk=h%2bKnos5aO7oNxVBq2a7bMk6jj2qbfuruJhIcO7CHJZg%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          title: "英语题库",
          total: 64,
          time: "2020-05-15",
          icon:
            "https://tse1-mm.cn.bing.net/th/id/R-C.acea67c41421bf50f39bd442ae1a9fe5?rik=M9FfdWPToXkMAA&riu=http%3a%2f%2fimg.alicdn.com%2fimgextra%2fi3%2f39963331%2fTB2Woy7dFXXXXXMXpXXXXXXXXXX_!!39963331.jpg&ehk=msWgacs26GfvGrsH0KNRF0VpHVlXJsdQ4r0GrYfWQ0s%3d&risl=&pid=ImgRaw&r=0",
        },
      ],
    };
  },
  methods: {
    linkTo(val) {
      console.log(val);
      this.$u.route({
        url: "pages/problem/showProblem/index?id=" + val,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.card-border {
  border: 1px solid #dddddd;
}
.u-body-item {
  font-size: 1.2rem;
  font-family: "楷体";
  font-weight: bolder;
  position: relative;
  color: #333;
  text {
    font-size: 24rpx;
    font-family: "宋体";
    font-weight: bold;
    color: #888888;
  }
  .total {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20rpx;
    font-weight: 500;
    color: #aaa;
  }
}

.u-body-item image {
  width: 90rpx;
  flex: 0 0 90rpx;
  height: 120rpx;
  border-radius: 18rpx;
  margin-right: 20rpx;
}
</style>
